<template>
  <div class="card-tab-list table-theme">
    <head-back-title title="卡片列表"></head-back-title>
    <el-card>
      <div class="top-menu">
        <div class="menu-left">
          <select-view
            :option-list="statusList"
            :value="status"
            placeholder="上下架"
            type="status"
            @value="setSelectValue"
          >
          </select-view>
        </div>
        <div class="menu-right">
          <refresh-button @refresh="refreshPage"></refresh-button>
          <search-view
            :option="optionList"
            @value="goSearch"
            @clear="refreshPage"
          ></search-view>
		  <div class="add">
            <el-button type="primary" @click="add">添加卡片</el-button>
          </div>
        </div>
      </div>
      <p class="data-number">总数据数：{{ total }}</p>
      <el-table :data="spaceList" border>
        <el-table-column
          label="序号"
          align="center"
          prop="id"
        ></el-table-column>
        <el-table-column
          label="标题"
          align="center"
          prop="title"
        ></el-table-column>
        <el-table-column label="图片" align="center" width="80">
          <template slot-scope="scope">
            <ImgPopover :src="scope.row.url"></ImgPopover>
          </template>
        </el-table-column>
        <el-table-column
          label="是否套餐"
          align="center"
          prop="house_status"
        ></el-table-column>
        <el-table-column
          label="套餐ID"
          align="center"
          prop="group_id"
        ></el-table-column>
        <el-table-column
          label="风格"
          align="center"
          prop="style_name"
        ></el-table-column>
        <el-table-column
          label="标签"
          align="center"
          prop="tab"
        ></el-table-column>
        <el-table-column
          label="描述"
          align="center"
          prop="item"
        ></el-table-column>
        <el-table-column
          label="工厂编号"
          align="center"
          prop="factory_sn"
        ></el-table-column>
        <el-table-column label="排序" align="center" prop="" width="100">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.sort"
              placeholder=""
              onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
              @keyup.enter.native="postSort(scope.row.sort, scope.row.id)"
              @blur="postSort(scope.row.sort, scope.row.id)"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="上下架" align="center" width="180">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              :active-value="1"
              :inactive-value="2"
              @change="upDown($event, scope.row.id)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column
          label="添加时间"
          align="center"
          prop="add_time"
        ></el-table-column>
        <el-table-column label="操作" align="center" width="150">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="edit(scope.row)"
              >编辑</el-button
            >
            <el-button type="danger" size="mini" @click="del(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pages">
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          :total="total"
          @current-change="init"
          :current-page="page"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import ImgPopover from "@/components/ImgPopover";
import addTabCard from "@/components/layer-dialog/addTabCard.vue";
import SelectView from "@/components/SelectView";
export default {
  components: {
    ImgPopover,
    SelectView,
  },
  data() {
    return {
      optionList: [
        {
          value: 0,
          label: "导航ID",
        },
        {
          value: 1,
          label: "导航标题",
        },
      ],
      tab_id: "",
      searchContent: "",
      classSelect: "",
      spaceList: [],
      total: 0,
      totalData: 0,
      status: 1,
      statusList: [
        {
          value: 1,
          label: "上架",
        },
        {
          value: 2,
          label: "下架",
        },
      ],
      page: 0,
    };
  },
  methods: {
    // 初始化列表
    init(e) {
      this.page = e;
      this.tab_id = this.$route.query.id;
      let data = {
        tab_id: this.tab_id,
        page: e - 1 ? e - 1 : 0,
        limit: 10,
		status:this.status
      };

      if (this.classSelect == 0 && this.searchContent != "") {
        data.id = this.searchContent;
      } else if (this.classSelect == 1 && this.searchContent != "") {
        data.title = this.searchContent;
      }

      this.$http(this.$ApiList.TabGoodsList, data).then((res) => {
        this.spaceList = res.datas.data;
        this.total = res.datas.count;
      });
    },

    // 上下架
    upDown(e, id) {
      let data = {
        status: e,
        id: id,
      };
      this.$http(this.$ApiList.TabGoodsDown, data).then((res) => {
        this.$layer.msg(res.datas);
        this.init();
      });
    },
    // 搜素
    goSearch(type, value) {
      this.searchContent = value;
      this.classSelect = type;
      this.init();
    },
    // 添加卡片
    add() {
      this.$layer.iframe({
        title: "添加卡片",
        maxmin: true,
        area: ["50%", "60%"],
        content: {
          content: addTabCard, //传递的组件对象
          parent: this, //当前的vue对象
          data: {
            type: 0,
          }, //props
        },
      });
    },
    // 删除
    del(id) {
      this.$confirm("此操作将永久删除该卡片, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let data = {
            id: id,
          };
          this.$http(this.$ApiList.TabGoodsDel, data).then((res) => {
            this.$message({
              message: res.datas,
              type: "success",
            });
            this.init();
          });
        })
        .catch(() => {});
    },
    // 编辑
    edit(info) {
      this.$layer.iframe({
        title: "编辑卡片",
        maxmin: true,
        area: ["50%", "60%"],
        content: {
          content: addTabCard, //传递的组件对象
          parent: this, //当前的vue对象
          data: {
            type: 1,
            info: info,
          }, //props
        },
      });
    },
    // 刷新
    refreshPage() {
      this.page = 1;
      this.status = 1;
      this.searchContent = "";
      this.classSelect = "";
      this.init();
    },
    postSort(sort, id) {
      if (sort < 0 || sort === "") {
        this.$layer.msg("请输入正确的排序");
        return;
      }
      let data = {
        sort: sort,
        id: id,
      };
      this.$http(this.$ApiList.TabGoodsUp, data).then((res) => {});
    },
    setSelectValue(obj) {
      const { type, value } = obj;
      switch (type) {
        case "status":
          this.status = value;
          break;

        default:
          break;
      }
      this.init();
    },
  },
  created() {
    this.init();
  },
};
</script>
<style lang="scss">
.card-tab-list {
}
</style>
